<template>
    <v-layout fill-height>
        <v-app-bar color="white" flat app>
            <v-btn icon @click="goBack">
                <v-icon>arrow_back</v-icon>
            </v-btn>

            <v-toolbar-title>{{chat.nickname}}</v-toolbar-title>

            <v-spacer></v-spacer>
        </v-app-bar>

        <v-flex class="flex-auto">
            <ul id="msgListBox" class="msgListBox">
                <li class="chatBox mb-10px" v-for="msg in messages" :key="msg.id">
                    <!--头像部分-->
                    <div v-if="msg.userId === user.id" class="row-end pl-65">
                        <div class="chatContent subtitle-1 mr-6px">
                            {{msg.content}}
                        </div>
                        <div class="chatImgBox">
                            <img class="chatHeadImg" :src="$imgUrl+msg.userImg"/>
                        </div>
                    </div>
                    <div v-else class="flex-row pr-65">
                        <div class="chatImgBox mr-6px">
                            <img class="chatHeadImg" :src="$imgUrl+msg.userImg"/>
                        </div>
                        <div class="chatContent subtitle-1">
                            {{msg.content}}
                        </div>
                    </div>
                </li>
            </ul>

            <v-card class="flex-row fixed-footer grey lighten-5">
                <v-card-actions class="flex-auto">
                    <!-- 失去焦点要改为false，要不然一直是true，判断的时候会判断，如果focus是true，屏幕变化滚到最下面，否则不滚-->
                    <v-text-field
                            v-focus="focusStatus"
                            @blur="focusStatus = false"
                            block
                            flat
                            :append-outer-icon="inputMessage ? 'send' : ''"
                            v-model.trim="inputMessage"
                            solo
                            clear-icon="close"
                            clearable
                            @click:append-outer="sendMsg"
                            @keyup.enter.native="sendMsg"
                    ></v-text-field>
                </v-card-actions>
                <!--<v-icon class="font40">mood</v-icon>
                <v-icon v-show="inputMessage" class="font40" @click="sendMsg">send</v-icon>
                <v-icon v-show="!inputMessage" class="font40">add_circle_outline</v-icon>-->
            </v-card>
        </v-flex>
    </v-layout>
</template>

<script lang="ts">
  import {Vue, Component, Prop, Watch} from 'vue-property-decorator'

  import {namespace} from "vuex-class"

  const chatModule = namespace('chat')
  const userModule = namespace('user')
  import MessageAdd from "@/model/MessageAdd"
  import User from "@/model/User"
  import Message from "@/model/Message"
  import Chat from "@/model/Chat"
  import RouterName from "@/const/RouterName"

  @Component({
    name: RouterName.message
  })
  export default class MessageVue extends Vue {
    @Prop() chatId: number
    inputMessage: string = ''
    focusStatus: boolean = false
    @userModule.State('user') user: User
    @chatModule.State('chats') chats: Chat []

    get chat() {
      const chat: Chat = this.chats.find(item => Number(item.id) === Number(this.chatId))
      return chat || null
    }

    goBack() {
      this.$routerTo(RouterName.chat)
    }

    get messages() {
      return this.chat.messages
    }

    mounted() {
      // 需要先滚动到最下方，
      this.scrollToBottom()
      // 获取焦点后屏幕会变化，继续保持在下方，通过下面的监控控制
      this.focusStatus = true
      // 如果刚进入页面，自动获取焦点，并且滚动到最下方，并且屏幕变化也要保持在最下面
      window.onresize = () => {
        // 如果已经在最下面 则滚，否则不滚
        if (this.focusStatus) {
          this.scrollToBottom()
        }
      }
    }

    @Watch('messages')
    messagesChange() {
      this.scrollToBottom()
    }

    /*@Watch('talkFilter')
    newMessageChange(newMessage) {
        if (newMessage.user.id === this.user.id && newMessage.beUser.id === this.receiveUserId
            || newMessage.user.id === this.receiveUserId && newMessage.beUser.id === this.user.id) {
            this.messages.push(newMessage)
            this.scrollToBottom()
        }
    }*/

    scrollToBottom() {
      this.$nextTick(() => {
        window.scrollTo(0, document.getElementById('msgListBox').scrollHeight)
      })
    }

    sendMsg() {
      if (this.inputMessage) {
        const msg: Message = new Message()
        msg.content = this.inputMessage
        msg.userId = this.user.id
        msg.userImg = this.user.imgs[0].img
        const length = this.messages.push(msg)
        this.$post('/message/addMessage', new MessageAdd(this.chatId, this.messages.find(item => item.userId !== this.user.id).userId, this.inputMessage)).then(res => {
          this.messages[length - 1] = res.data
        })
        this.inputMessage = ''
        //发送消息后需要保持焦点，并且屏幕变化也要保持在最下面
        this.focusStatus = true
      }
    }
  }
</script>
<style lang="scss">
    @import 'index.scss';

    .v-text-field__details {
        display: none;
    }

    div.v-input__slot {
        margin-bottom: 0;
    }
</style>

<!--聊天的时候可以直接切换在顶部-->
<!--<div class="row-around h80px">
           <div class="col-all-center w65px" style="width: 65px">
               <mu-avatar color="teal" size="50">K</mu-avatar>
               <p class="font-gray">秦开远</p>
           </div>
           <div class="col-all-center w65px" style="width: 65px">
               <mu-avatar color="teal" size="50">K</mu-avatar>
               <p class="font-gray">秦开远</p>
           </div>
           <div class="col-all-center w65px" style="width: 65px">
               <mu-avatar color="teal" size="50">K</mu-avatar>
               <p class="font-gray">秦开远</p>
           </div>
           <div class="col-all-center w65px" style="width: 65px">
               <mu-avatar color="teal" size="50">K</mu-avatar>
               <p class="font-gray">秦开远</p>
           </div>
           <div class="col-all-center w65px" style="width: 65px">
               <mu-avatar color="teal" size="50">K</mu-avatar>
               <p class="font-gray">秦开远</p>
           </div>
       </div>-->
